<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../../../css/reset.css" />
		<link rel="stylesheet" href="../../../css/cmms.css" />
		<link rel="stylesheet" href="../../../css/iconfont.css" />
		<script src="../../../js/vconsole.min.js"></script>
	</head>
	<style type="text/css">
		p,input{
			margin: 0;
		}
		input[type=color], input[type=date], input[type=datetime-local], input[type=datetime], input[type=email], input[type=month], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week], select, textarea{
			margin: 0;
			text-align: left;
		}
		#noBarList{
			position: relative;
		}
		#noBarList .searchBox{
			position: absolute;
			top: 48px;
			width: 100%;
			padding: 8px 15px;
			background-color: #F2F4FB;
			border-bottom: 1px solid #ccc;
		}
		#noBarList .searchBox>form{
			height: 30px;
			line-height: 30px;
			position: relative;
		}
		#noBarList .searchBox>form>input{
			line-height: 30px;
			height: 30px;
			position: absolute;
			left: 0;
			top: 0;
			border-radius: 15px;
			border: none;
			color: #4d4d4d;
			/* padding-left: 30px; */
			padding: 0 0 0 30px;
			text-align: left;
			background-color: #fff;
		}
		#noBarList .searchBox>form>input::placeholder{
			font-size: 13px;
			color: #666;
			opacity:0.7;
		}
		#noBarList .searchBox>form i{
			position: absolute;
			z-index: 10;
			left: 10px;
			font-size: 15px;
			color: #666;
			opacity:0.7;
		}
		#noBarList .searchBox>form>span{
			width: 5%;
			line-height: 30px;
		}
		#noBarList .searchBox>form>span>i{
			font-size: 16px;
			color: #666;
		}
		.codeList{
			padding: 10px;
			background-color: #fff;
		}
		.codeList>li{
			line-height: 30px;
			border-bottom: 1px solid #ccc;
			padding: 5px;
		}
		.codeList>li>div{
			display: flex;
			justify-content: space-between;
		}
		.codeList>li>div.proBox{
			display: block;
		}
		.codeList>li>div.proBox i{ font-style:normal}
		.codeList>li>div>.darkC{
			font-size: 15px;
		}
		.codeList>li>div:nth-child(2){
			padding: 10px 0;
		}
		.darkC{
			color: #333;
		}
		.lightC{
			color: #C2C2C2;
		}
		.blueC{
			color: #00507E;
		}
		.mediumC{
			color: #808080;
		}
		#noBarList .mui-bar{
			background-color: #00507E;
		}
		#noBarList .mui-bar>a{
			color: #fff;
		}
		#noBarList .mui-bar>h1{
			color: #fff;
		}
		#refreshContainer{
			position: absolute;
			top: 98px;
		}
		#noBarList .notFind {
			text-align: center;
			overflow: auto;
			position: relative;
			height: 345px;
			padding-top: 45px;
			top: 45px;
		}
		#noBarList .notFind img{
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
		}
		#noBarList .notFind p{
			position: absolute;
			bottom: 40px;
			text-align: center;
			width: 100%;
		}
	</style>
	<body>
		<div id="noBarList">
			<header class="mui-bar mui-bar-nav ">
			    <a id="icon-menu" class="mui-icon mui-icon-left-nav mui-pull-left" @tap="backIndex"></a>
			    <!-- <a class="mui-icon mui-pull-right iconfont icon-gerenziliao"></a> -->
			    <h1 class="mui-title">{{topTitle}}</h1>
			</header>
			<!--搜索-->
			<div class="searchBox">
				<form  @submit.prevent action="#">
					<input class="search_input  search" ref="input" 
					@focus="searchFocus" 
					@keypress="search($event)"  type="search"
					:placeholder="placeholder" v-model="searchInput" 
					/>
					<span class="searchBtn" @tap="searchDirect"><i class="iconfont icon icon-sousuo"></i> </span>
				</form>
			</div>
			<div id="refreshContainer" class="mui-scroll-wrapper" :style="contentStyleObj">
				<div class="mui-scroll">
					<ul class="codeList">
						<li @tap="toAssociateCode(unCode)" v-for="(unCode,index) in unCodeList">
							<div>
								<span class="darkC">{{unCode.patientName}}</span>
								<span class="lightC">{{unCode.submitTime|replaceT}}</span>
							</div>
							<div class="proBox">
								<span class="mediumC" v-for="(pro,pIndex) in unCode.orderProjectVos">{{pro.projectName}}<i v-if="pIndex!=(unCode.orderProjectVos.length-1)">、</i></span>
							</div>
							<div>
								<label >共<span class="blueC">{{unCode.projectNum}}</span>个检验项目<span class="blueC">￥{{unCode.amount}}</span></label>
								<label><i class="iconfont icon-yisheng blueC"></i>{{unCode.doctorName}}</label>
							</div>
							<div>
								<span class="mediumC">业务员:{{unCode.saleName}}</span>
								<span class="blueC">去关联<i class="iconfont icon-chakangengduo"></i></span>
							</div>
						</li>
					</ul>
				</div>
			</div>
			<div class="notFind" v-show="show">
				<img src="../../../img/notFind.png" alt="未找到对应的数据" />
				<p>暂无数据</p>
			</div>
		</div>
		<script src="../../../js/mui.min.js"></script>
		<script src="../../../js/vue.js"></script>
		<script src="https://res2.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
		<script src="../../../js/cmms.js?time=222"></script>
		<script type="text/javascript">
			new Vue({
				el:"#noBarList",
				data(){
					return{
						show:false,
						placeholder:'请输入医生姓名',
						token:'',
						searchInput:'',
						topTitle:'关联条码',
						unCodeList:[],
						pageCurrent:1,
						pageSize:10,
						count:0,
						total:0,
						refresh:true,
						pullDirection:'',
						contentStyleObj:{
							height:''
						}
					}
				},
				created(){
					let self = this;
					window.addEventListener('resize', self.getHeight);
					self.getHeight()
					mui.ready(function(){
						mui.init({
							pullRefresh: {
								container: '#refreshContainer',
								//下拉刷新
								down: {
									auto:false,
									style:'circle',
									callback: self.pulldownRefresh
								},
								//上拉加载
								up: {
									height:50,
									auto:true,
									contentrefresh: '正在加载...',
									callback: self.pullupRefresh
								}
							}
						});
					})
				},
				mounted(){
					var vConsole = new VConsole();
				},
				methods:{
					getHeight(){
						this.contentStyleObj.height=window.innerHeight-100+'px';
						console.log(this.contentStyleObj.height)
					},
					getPages(){
						let _this = this;
						AT.muiAjax('/partner-sale/ludan/patientTemporaryOrders','post',{
							"current": _this.pageCurrent ,
							"doctorName":_this.searchInput,
							"enabled": 1,
							"size": 10
						},function(res){
							_this.total = res.total;
							console.log(res);
							let unCodeList = _this.unCodeList;
							console.log(unCodeList);
							console.log(_this.unCodeList);
							if(res.records.length>0){
								_this.pageCurrent++;
								_this.unCodeList.push(...res.records);
								_this.show = false;
								mui('#refreshContainer').pullRefresh().endPullupToRefresh(false);
							}else{
								_this.unCodeList = res.records;
								_this.show = true;
								mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);
							}
						});
					},
					search(event){
						if (event.keyCode == 13) { //如果按的是enter键 13是enter 
							event.preventDefault(); //禁止默认事件（默认是换行） 
							console.log(event.target.value)
							console.log(this.searchInput)
							console.log("点击了确认") 
							this.getPages(this.searchInput);
						}
					},
					searchDirect(){
						this.getPages(this.searchInput);
					},
					searchFocus(){
						console.log(222)
					},
					scanBarcode(){
						let _this = this;
						wx.scanQRCode({
							needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
							scanType: ["barCode"], // 可以指定扫二维码还是一维码，默认二者都有
							success: function (res) {
								let resultStr = res.resultStr.split(',');
								let scanbarCode = resultStr[resultStr.length-1]; 
								if(scanbarCode){
									let prevCode =  scanbarCode.substring(0, 6);
									if(prevCode.length<6){
										mui.alert('条码不能少于6位');
										_this.searchInput = scanbarCode;
									}else{
										_this.searchInput = prevCode;
										_this.muiInit(prevCode)
									}
								}
								// mui.alert('扫到的条码为：'+scanbarCode);
								console.log(scanbarCode)
							}
						});
					},
					backIndex(){
						location.href = '../index.html';
					},
					toAssociateCode(patient){
						console.log(patient);
						location.href = 'associatCode.html?fromWeb=codeList&orderId='+patient.orderId;
						let patientInfo = {
							"age": patient.age,
							"ageUnit": patient.ageUnit,
							"orderId": patient.orderId,
							"patientName": patient.patientName,
							"remark": patient.remark,
							"sex": patient.sex,
							"patientMobile":patient.patientMobile
						}
						localStorage.setItem('patientInfo',JSON.stringify(patientInfo));
						localStorage.setItem('orderProjectVos',JSON.stringify(patient.orderProjectVos));
						let amountInfo = {
							amount:patient.amount,
							actualAmount:patient.actualAmount,
							discountAmount:patient.discountAmount,
							settleAmount:patient.settleAmount
						};
						localStorage.setItem('amountInfo',JSON.stringify(amountInfo));
						localStorage.setItem('hospitalName',patient.hospitalName);
						localStorage.setItem('doctorName',patient.doctorName);
						localStorage.setItem('partnerHospitalLabId',patient.partnerHospitalLabId);
						
					},
					//下拉刷新
					pulldownRefresh(){
						// this.refresh = true;
						let _this = this;
						_this.pullDirection = 'down';
						setTimeout(() => {
							_this.unCodeList = [];
							_this.pageCurrent = 1;
							_this.getPages();
						   mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
					   },1000)
					},
					//上拉加载
					pullupRefresh(){
						let _this = this;
						_this.pullDirection = 'up';
						setTimeout(function() {
							_this.getPages();
						});
					},
				}
			})
		</script>
	</body>
</html>
